<template>
  <div class="abc">
    <el-input v-model="name" placeholder="请输入区域名称" clearable></el-input>
    <el-tree
      :data="menuList"
      :props="menuListTreeProps"
      node-key="id"
      ref="add"
      @current-change="menuListTreeCurrentChangeHandle"
      :default-expand-all="true"
      :highlight-current="true"
      :check-on-click-node="true"
      :filter-node-method="filterDeptNode"
      :expand-on-click-node="false"
    ></el-tree>
    {{value}}
  </div>
</template>

<script>
import { treeDataTranslate } from "@/utils";
export default {
  data() {
    return {
      menuList: [],
      menuListTreeProps: {
        label: "name",
        // children: "children",
      },
      dataForm: {
        name: "",
        pid: "",
      },
      name: "",
    };
  },

  mounted() {
    this.getDataList();
  },

  props: {
    value: String,
  },
  methods: {
    // 部门点击事件
    menuListTreeCurrentChangeHandle(data, node) {
      let id = data.pid;
      this.dataForm.parentName = data.name;
      console.log(data);
      this.$nextTick(() => {
        let b = this.$refs.add.getCheckedKeys();
        console.log(b);
        let idStr = "";
        for (let i = 0; i < b.length; i++) {
          idStr += b[i] + ",";
        }
        id = idStr;

               
      });
    },
    filterDeptNode(value, data, node) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/seat/seatarea/list"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        this.menuList = treeDataTranslate(data.page, "id", "pid");
        console.log(this.menuList);
      });
    },
  },
};
</script>